@include b('emoji-picker') {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;

  @include e('button-content') {
    display: flex;
    align-items: center;
    min-height: getCssVar('height-control', 'default');

    @include m('icon') {
      margin-right: getCssVar('spacing', 'extra-tight');
      fill: getCssVar(color, primary, text);
    }
  }

  @include e('button') {
    &.is-clear {
      position: relative;
      padding: getCssVar('spacing', 'none');
      padding-right: getCssVar('spacing', 'base-tight');
      color: getCssVar(color, text, 0);
      background-color: transparent;

      &:hover {
        .#{bem(emoji-picker__button-content--icon)} {
          display: block;
        }
      }

      .#{bem(emoji-picker__button-content--icon)} {
        position: absolute;
        top: 0;
        right: 0;
        display: none;
        margin-right: 0;
        font-size: getCssVar('font-size', 'regular');
        fill: getCssVar('color', 'text', 3);

        &:hover {
          fill: getCssVar(color, primary);
        }
      }
    }
  }

  @include m('readonly') {
    display: flex;
    align-items: center;
    line-height: 32px;

    .#{bem(emoji-picker__button)} {
      padding: 0;
      color: getCssVar(form-item, readonly-color);
      pointer-events: none;
      cursor: default;

      .#{bem(emoji-picker__button-content)} {
        display: none;
      }
    }

    .is-clear {
      &.#{bem(emoji-picker__button)} {
        .#{bem(emoji-picker__button-content)} {
          display: flex;
        }

        .#{bem(emoji-picker__button-content--icon)} {
          display: none;
        }
      }
    }
  }
}

@include b('emoji-picker-popper') {
  &.el-popper.el-popper {
    width: auto;
    padding: 0;
  }
}


@include b(form-item) {

  @include b(emoji-picker) {
    @include when(show-default) {
      padding: getCssVar(form-item, hover-edit-padding);

      // 悬浮显示编辑器
      &.is-active,
      &:hover {
        @include b(emoji-picker-form-default-content) {
          display: none;
        }

        @include b(emoji-picker__button) {
          padding: 8px 15px;
          pointer-events: auto;
          background-color: var(--ibiz-color-primary);

          &.is-clear {
            padding: getCssVar('spacing', 'none');
            padding-right: getCssVar('spacing', 'base-tight');
            background-color: transparent;
          }
        }

        @include b(emoji-picker__button-content) {
          display: flex;
        }
      }

      // 不悬浮时显示信息态
      @include b(emoji-picker__button) {
        padding: getCssVar('spacing', 'none');
        pointer-events: none;
        background: transparent;
      }

      @include b(emoji-picker-form-default-content) {
        display: flex;
        align-items: center;
        width: 100%;
        font-family: Arial, sans-serif;
        font-size: getCssVar(form-item, font-size);
        line-height: getCssVar(editor, default, line-height);
        color: getCssVar(form-item, text-color);

        &.is-clear {
          padding: getCssVar('spacing', 'none');
          padding-right: getCssVar('spacing', 'base-tight');
          background-color: transparent;
        }
      }

      @include b(emoji-picker__button-content) {
        display: none;
      }

      // 输入态
      @include when(editable) {
        @include b(emoji-picker-form-default-content) {
          display: none;
        }

        @include b(emoji-picker__button-content) {
          display: flex;
        }
      }
    }
  }
}
